<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            box-sizing:border-box;
        }
        html,body{
            padding: 0;
            margin: 0;
            height: 100%;
        }
        main{
            background-image: url("image/背景.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position:center,center;
            width: 100%;
            height: 100vh;
            margin: 0 auto;
            padding: 60vh 0 0 0;
        }
        /*#beijing{
            width: 100%;
            height: 100%;
        }*/
        section{
            background-image: url("image/form.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position:center,center;
            width: 80%;
            height: 14.6875rem;
            /*position: absolute;
            left: 10%;
            bottom:20px;*/
            margin: 0 auto;
        }
        #tupian{
            position: relative;
            top: 15%;
            height: 40%;
            display: flex;
            justify-content: space-around;
            line-height: 100%;
        }
        #tupian img{
            height: 60%;
        }
        #shurukuang{
            text-align: center;
            position: relative;
            top: 10px;
        }
        .input{
            width: 80%;
            height: 25px;
            margin: 0.4375rem 0;
            border:0.0625rem solid #999;
            border-radius: 1.25rem;
            background-color: #F0EEE8;
        }
        #fasong{
            position: absolute;
            top: 62%;
            right: 12%;
            height: 20px;
            font-size: 12px;
            border-radius: 10px;
            border:0.0625rem solid #999;
        }
        #btn{
            text-align: center;
            height: 55px;
            line-height: 55px;
        }
        #button{
            width: 80%;
            margin: 0 auto;
        }
        article{
            height: 100vh;
            width: 100vw;
            background-image: url("平台下载/平台下载背景图层1@2x.png");
            padding: 141px 0 0 0;
        }
        #xiang{
            background-image: url("平台下载/矢量智能对象拷贝@2x.png");
            background-size: 100% 100%;
            width: 152.5px;
            height: 200.5px;
            margin: 0 auto;
        }
        #anzhuo{
            background-image: url("平台下载/安卓下载@2x.png");
            background-size: 100% 100%;
            margin: 120px auto 32px;
            width: 296.5px;
            height: 44px;
        }
        #IOS{
            background-image: url("平台下载/IOS下载拷贝@2x.png");
            background-size: 100% 100%;
            width: 296.5px;
            height: 44px;
            margin: 0 auto;
        }
        @media all and (min-width:660px){
            /*#beijing{
                height: 1300px;
                width: 100vw;
            }*/
            main{
                padding: 900px 0 0 0;
                height: 1300px;
                width: 100vw;
            }
            section{
                /*background: aqua;*/
                background-image: url("image/form.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position:center,center;
                width: 80%;
                height: 300px;
                /*position: absolute;
                left: 10%;
                bottom:20px;*/
                margin: 0 auto;
            }
            #button{
                margin: 10px 0;
                height: 100%;
            }
            article{
                height: 1300px;
                width: 100vw;
                background-image: url("平台下载/平台背景图层1@3x.png");
                /*background-size: 100vw 1300px;*/
                padding: 141px 0 0 0;
            }
            #xiang{
                background-image: url("平台下载/矢量智能对象拷贝@3x.png");
                background-size: 100% 100%;
                width: 229px;
                height: 301px;
                margin: 0 auto;
            }
            #anzhuo{
                background-image: url("平台下载/安卓下载@3x.png");
                background-size: 100% 100%;
                margin: 120px auto 32px;
                width: 445px;
                height: 66px;
            }
            #IOS{
                background-image: url("平台下载/IOS下载拷贝@3x.png");
                background-size: 100% 100%;
                width: 445px;
                height: 66px;
                margin: 0 auto;
            }
        }
    </style>
</head>
<body>
<!--<img id="beijing" src="image/背景.png" alt="">-->
<main>
    <section>
        <div id="tupian">
            <img src="image/hb_item.png" alt="">
            <img src="image/word.png" alt="">
        </div>
        <div id="shurukuang">
            <input class="input" id="name" type="text">
            <input class="input" id="password" type="text">
            <input type="button" id="fasong" value="发送">
        </div>
        <div id="btn">
            <img id="button" src="image/button.png" alt="">
        </div>
    </section>
</main>
<!--<article>-->
    <!--&lt;!&ndash;<img id="xiang" src="平台下载/矢量智能对象拷贝@2x.png" alt="">&ndash;&gt;-->
    <!--<div id="xiang"></div>-->
    <!--&lt;!&ndash;<img id="anzhuo" src="平台下载/安卓下载@2x.png" alt="">&ndash;&gt;-->
    <!--<div id="anzhuo"></div>-->
    <!--&lt;!&ndash;<img id="IOS" src="平台下载/IOS下载拷贝@2x.png" alt="">&ndash;&gt;-->
    <!--<div id="IOS"></div>-->
<!--</article>-->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/layer/layer.js"></script>
<script>
    $('#button').on('click',function () {
        var number = $('#name').val();
        var yanzhengma = $('#password').val();
        layer.alert('请确认,输入的手机号为:'+number
            +'验证码为:'+yanzhengma);
    });
    // $('button').click(function () {
    //     if ($(this).attr('data-click')){
    //         layer.alert('请不要重复点击');
    //     }else{
    //         layer.alert('发送成功');
    //         $(this).attr('data-click','1');
    //     }
    // })
    var wait = 60;
    function time(o){
        if(wait == 0){
            // o.removeAttribute('disabled');
            o.value='免费获取验证码';
            wait = 60;
        }else{
            // o.setAttribute('disabled',true);
            o.value = wait + "秒后可以重新发送";
            wait--;
            setTimeout(function(){
                time(o)
            },1000)
        }
    };
    $('#fasong').click(function(){
        time(this);
    })
</script>
</body>
</html>